<template>
  <div class="wrapper">
    <div class="title">我的订单</div>
    <div class="orders">
      <!-- 头部 -->
      <div class="order" v-for="(item, index) in list" :key="index">
        <div class="order__title">
          <span class="order__title__name">{{ item.shopName }}</span>
          <span class="order__title__status">{{
            item.isCancel ? '已取消' : '已下单'
          }}</span>
        </div>
        <!-- 内容 -->
        <div class="order__content">
          <div class="order__content__imgs">
            <template v-for="subItem in item.products">
              <img
                class="order__content__imgs__img"
                :src="subItem.product.img"
                alt=""
              />
            </template>
          </div>
          <div class="order__content__info">
            <span class="order__content__info__price"
              >￥{{ item.totalPrice }}</span
            >
            <span class="order__content__info__num"
              >共{{ item.totalNumber }}件</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <Docker :currentIndex="2" />
</template>

<script>
import { reactive, toRefs } from 'vue';
import { get } from '../../utils/request';

import Docker from '../../components/Docker.vue';
// 处理订单列表逻辑
const useOrderListEffect = () => {
  const data = reactive({ list: [] });
  const getData = async () => {
    let result = await get('/api/order');
    // console.log(result);
    if (result?.errno === 0 && result?.data?.length) {
      // console.log(result.data);
      const orderList = result.data;
      orderList.forEach((order) => {
        const products = order.products || [];
        let totalPrice = 0;
        let totalNumber = 0;
        products.forEach((productItem) => {
          totalNumber += productItem?.orderSales || 0;
          totalPrice +=
            productItem?.product?.price * productItem?.orderSales || 0;
        });
        order.totalPrice = totalPrice;
        order.totalNumber = totalNumber;
      });
      console.log(orderList);
      data.list = result.data;
    }
  };
  getData();
  const { list } = toRefs(data);
  return { list };
};

export default {
  name: 'OrderList',
  components: { Docker },

  setup() {
    const { list } = useOrderListEffect();
    console.log(list);
    return { list };
  },
};
</script>

<style lang="scss" scoped>
@import '../../style/variables.scss';
@import '../../style/mixins.scss';

.wrapper {
  overflow-y: auto;
  @include fix-content;
  background-color: $content-bgColor;
}
.title {
  line-height: 0.44rem;
  text-align: center;
  font-size: 0.16rem;
  color: $content-fontColor;
  background-color: $bgColor;
}
// .orders {
// }
.order {
  margin: 0.16rem 0.18rem;
  padding: 0.16rem;
  background-color: $bgColor;
  &__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.22rem;
    margin-bottom: 0.16rem;
    &__name {
      color: $content-fontColor;
      font-size: 0.16rem;
    }
    &__status {
      font-size: 0.14rem;
      color: $light-fontColor;
    }
  }
  &__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &__imgs {
      display: flex;
      &__img {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.12rem;
      }
    }
    &__info {
      display: flex;
      flex-direction: column;
      text-align: right;
      &__price {
        line-height: 0.2rem;
        color: $highlight-fontColor;
        margin-bottom: 0.04rem;
      }
      &__num {
        line-height: 0.14rem;
        font-size: 0.12rem;
        color: $content-fontColor;
      }
    }
  }
}
</style>
